<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding:0;margin:0;box-sizing:border-box}
        .box{width: 300px;margin:200px auto 0; background: #FFF;height: 100px;
        display:flex;align-items: center;}
        .flag , .equal{width: 50px;text-align: center;}
        .num1 , .num2 , .res{flex:1;background: red;padding: 10px 0;color: #FFF;
        text-align: center;font-weight: 900;}
    </style>
</head>
<body>
    <div class="box">
        <span class="num1">数字1</span>
        <span class="flag">符号</span>
        <span class="num2">数字2</span>
        <span class="equal">=</span>
        <span class="res">结果</span>
    </div>
    <script>
        var num1El = document.querySelector(".num1") ,
            num2El = document.querySelector(".num2") , 
            resEl = document.querySelector(".res") ,
            flagEl = document.querySelector(".flag") ;

        // 实现一个计算器
        // 1 弹出第一个输入框
        var num1 = prompt("请输入第一个操作数")
        // 没有输入
        if(num1 === "") {
            alert("请输入")
            // 输入  判断不是数字
        }else if(isNaN( num1 )){
            alert("请输入数字")
            // 输入 是数字  需要弹出第二个操作数
        }else{  
            var num2 = prompt("请输入第二个操作数")
            // 没有输入 或 输入的不是数字 同意提示 请输入数字
            if(num2 === ""  || isNaN(num2)){
                alert("请输入数字")
            }else{
                // 输入数字  需要弹出第三个输入框   输入运算符
                var flag = prompt("请输入操作符 eg: + - * / %")
                var res = 0; // 用于加减乘除后的结果
                // 用多条件的switch 判断操作的运算符
                switch(flag){
                    case "+" :
                        res = num1 * 1 + num2 * 1;
                    break;
                    case "-" :
                        res = num1 - num2 ;
                    break;
                    case "*" :
                        res = num1 * num2 ;
                    break;
                    case "/" :
                        res = num1 / num2 ;
                    break;
                    case "%" :
                        res = num1 % num2 ;
                    break;
                    default :
                        res = "无结果" ;
                    break;
                }
                // 将输入的数值和运算符和结果 分别作为元素的内容显示
                num1El.innerHTML = num1
                num2El.innerHTML = num2
                flagEl.innerHTML = flag
                resEl.innerHTML = res
            }
        }
        
    </script>
</body>
</html>